<!-- 展示容器信息 -->
<div *ngIf="dataSet">
  <!-- <div> -->
  <div nz-row>
    <div nz-col nzSpan="24" class="detail-info">
      <!-- 第一行 -->
      <div nz-row>
        <div nz-col nzSpan="16" class="detail-title-info">
          容器信息
        </div>
        <div nz-col nzSpan="8" class="float-right" style="font-size: 20px">
          <i nz-icon type="exclamation-circle" theme="outline" style="color:coral"></i>&nbsp;&nbsp;&nbsp;&nbsp;
          <i nz-icon type="folder-add" theme="outline" style="color:cornflowerblue"></i>&nbsp;&nbsp;&nbsp;&nbsp;
          <i nz-icon type="delete" theme="outline"></i>
        </div>
      </div>
      <!-- 第二行 -->
      <div nz-row>
        <div nz-col class="detail-content-info">
          <strong>名称: </strong>
          <ng-container *ngIf="dataSet?.containerName; else noData">
            {{dataSet.containerName}} |
          </ng-container>
          <ng-template #noData>
            暂无记录 |
          </ng-template>
          <strong>版本号:</strong>
          <span>
            <ng-container *ngIf="dataSet?.containerVersion; else noData">
              {{dataSet.containerVersion}}
            </ng-container>
            <ng-template #noData>
              暂无记录
            </ng-template>

          </span>

        </div>
      </div>

    </div>

  </div>


  <!-- 展示应用数、服务器数 -->
  <div nz-row>
    <div nz-col nzSpan="24" class="cve-application2">
      <div nz-row>
        <div nz-col class="application-title-info">
          服务器信息
        </div>
      </div>
      <!-- 第二行 -->
      <div nz-row>
        <div nz-col class="application-content-info box-title">
          <strong>IP: </strong>
          {{ dataSet.ip }} |
          <!-- {{ dataSet.version }} &nbsp; | &nbsp; -->
          <strong>服务器名称:</strong>
          <span>
            <!-- <ng-container *ngIf="dataSet?.releaseDate; else noData">
              {{dataSet.releaseDate}}
            </ng-container>
            <ng-template #noData>
              暂无记录
            </ng-template> -->
            {{dataSet.hostname}}
          </span>
        </div>
      </div>

    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="24" class="cve-application2">
      <div nz-row>
        <div nz-col class="application-title-info">
          部署应用
        </div>
      </div>
      <!-- 第二行 -->
      <div nz-row>
        <div nz-col class="application-content-info box-title">
          <nz-list [nzGrid]="{gutter: 16, xs: 24, sm: 12, md: 6, lg: 6, xl: 4 }">
            <ng-container *ngIf="dataSet?.apps; else dataNull">
              <span *ngFor="let app of dataSet?.apps;let key=index">
                <i nz-icon type="windows" theme="outline"></i>
                <a href="javascript:;" class="cve-application-list">
                  {{ app?.name }}
                </a>
              </span>

            </ng-container>
            <ng-template #dataNull>
              <i nz-icon type="windows" theme="outline"></i>
              暂无数据
            </ng-template>

          </nz-list>

        </div>
      </div>

    </div>
  </div>
  <div nz-row class="detail-cve" [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8, xxl: 8 }" class="box">
    <!-- 在此处加for循环 -->
    <div nz-row class="box-padding" *ngFor="let baseline of dataSet?.baselines">
      <div nz-col>
        <!-- 第一行 -->
        <div nz-row class="box-line-padding">
          <div nz-col [nzSpan]="2" class="box-title">
            安全基线
          </div>
          <div nz-col [nzSpan]="22" class="box-title">
            <span style="color: royalblue">
              {{ baseline.baselineNumber}}
            </span>
          </div>
        </div>

        <!-- 第二行 -->
        <div nz-row class="box-line-padding">
          <div nz-col [nzSpan]="2" class="box-title">
            基线详情
          </div>
          <div nz-col [nzSpan]="22">
            <table width="60%">
              <tr>
                <td class="list">
                  <strong>
                    安全基线项目名称
                  </strong>
                </td>
                <td class="list font-style">{{baseline.baselineName}}</td>
              </tr>
              <tr>
                <td class="list">
                  <strong>安全基线编号</strong>
                </td>
                <td class="list font-style">{{baseline.baselineNumber}}</td>
              </tr>
              <tr>
                <td class="list">
                  <strong>安全基线项说明</strong>
                </td>
                <td class="list font-style">{{baseline.description}}</td>
              </tr>
              <tr>
                <td class="list">
                  <strong>检测操作步骤</strong>
                </td>
                <td class="list font-style">{{baseline.checkProcess}}</td>
              </tr>
              <tr>
                <td class="list">
                  <strong>基线符合性判定依据</strong>
                </td>
                <td class="list font-style">{{baseline.judgmentBasis}}</td>
              </tr>
              <tr>
                <td class="list">
                  <strong>备注</strong>
                </td>
                <td class="list font-style">{{baseline.note}}</td>
              </tr>
            </table>
          </div>
        </div>

        <!-- 第三行 -->
        <div nz-row class="box-line-padding">
          <div nz-col [nzSpan]="2" class="box-title">
            检测结果
          </div>
          <div nz-col [nzSpan]="22" class="box-title">
            <div nz-row *ngFor="let evidence of baseline.evidences">
              <div nz-col>
                {{ evidence.evidence }}
                <ng-container *ngIf="evidence.pass; else elseTemplate">
                  <span class="safety">Pass</span>
                </ng-container>
                <ng-template #elseTemplate>
                  <span class="danger">Fail</span>
                </ng-template>
              </div>
            </div>
          </div>
        </div>

      </div>
      <nz-divider></nz-divider>
    </div>


  </div>

</div>
